AI解析を使った画像シェアWEBアプリを超簡単に作る【Cognito設定編】#reinvent

*このエントリはシリーズ2番目の記事です。

1. 設定編
2. Cognito編

早速Amplify CLIからCognitoユーザープールを作成してみましょう。

AWS Amplify CLI 設定

以下のコマンドで始めます。

amplify init

• デフォルトのエディタにCloud9がないので'None'を選択します。
• 今回はフロントエンドにReact使うので言語は'Javascript'、フレームワークは'React'を選択します。
• その後はデフォルトを選択して進み、最後のプロファイルには'default'を選択します。

ec2-user:~/environment $ amplify init
Note: It is recommended to run this command from the root of your app directory
? Choose your default editor: Sublime Text
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider awscloudformation
AWS access credentials can not be detected.
? Setup new user Yes
Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

ユーザーを新たに作成するかどうか聞かれるので設定する場合はYesを選択します。 ユーザー名を設定して進むとIDとシークレットキーを求められるので、表示されているURLから AWSコンソールにログインし、ユーザーの作成とシークレットキーの発行を行います。

既存のものを利用する場合はnoを選択し、IDとキーを入力して進みます。

ec2-user:~/environment $ amplify init
Note: It is recommended to run this command from the root of your app directory
? Choose your default editor: None
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider awscloudformation
AWS access credentials can not be detected.
? Setup new user No

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? accessKeyId:  AKIAJDOGKK**********
? secretAccessKey:  C2zgNw1KriI4Qb0Vo/PA********************
? region:  us-east-1
⠧ Initializing project in the cloud...

CREATE_COMPLETE environment-20181130023031 AWS::CloudFormation::Stack Fri Nov 30 2018 02:30:59 GMT+0000 (UTC) 
✔ Successfully created initial AWS cloud resources for deployments.

Your project has been successfully initialized and connected to the cloud!

Authの追加

Cognito Authentication を追加します。

amplify add auth

ec2-user:~/environment $ amplify add auth
Using service: Cognito, provided by: awscloudformation
 The current configured provider is Amazon Cognito. 
 Do you want to use the default authentication and security configuration? Yes, use t
he default configuration.
Successfully added resource cognito9e2110c6 locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

するとCfnを生成してくれるので、それをAWSへPushします。

ec2-user:~/environment $ amplify push
| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Auth     | cognito9e2110c6 | Create    | awscloudformation |
? Are you sure you want to continue? true
⠇ Updating resources in the cloud. This may take a few minutes...

最後に

 All resources are updated in the cloud

と表示されれば成功です。

ここまででCognitoのバックエンドリソースの作成、設定が完了しました。 次の章ではReact.jsを使ってフロントを構築してゆきます。